<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
        <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%
	String ctx = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>在线音乐平台</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
	
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 

</script>
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css'
	media="all" />
<!-- //bootstrap -->
<link href="css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
<link
	href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
	rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Poiret+One'
	rel='stylesheet' type='text/css'>
<!-- //fonts -->
</head>
<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<!--  <a class="navbar-brand" href="index.jsp"><h1><img src="images/logo.png" alt="" /></h1></a> -->
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<div class="top-search">
				<form class="navbar-form navbar-right" action="<%=ctx%>/song/selectSong" method="post">
					<input type="text" class="form-control" name="songName" id="songName" placeholder="输入歌曲名">
					<input type="submit" >
				</form>
				
				<div class="header-top-right">
				 <c:if test="${sessionScope.loginUser != null }"> 
				<div class="side-bottom-icons">
					<ul class="nav2">
						<li style="color: black;">个人设置</li>
						<li><a href="<%=ctx%>/user/toAbout" class="facebook"></a></li>
						<li style="color: black;">退出账户</li>
						<li><a href="<%=ctx%>/user/logout" class="facebook dribbble"> </a></li>
					</ul>
			</div>
				</c:if> 
				
				<c:if test="${sessionScope.loginUser == null }">
					<div class="signin">
						<a href="#small-dialog2" class="play-icon popup-with-zoom-anim" onclick="verify()">注册</a>
						<!-- pop-up-box -->
						<script type="text/javascript" src="js/modernizr.custom.min.js"></script>
						<link href="css/popuo-box.css" rel="stylesheet" type="text/css"
							media="all" />
						<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
						<!--//pop-up-box -->
						<div id="small-dialog2" class="mfp-hide">
							<h3>注册账户</h3>
							<div class="social-sits">
								<div class="facebook-button">
									<a href="#">这写个啥</a>
								</div>
								<div class="chrome-button">
									<a href="#">这写个啥</a>
								</div>
								<div class="button-bottom">
									<p>
										已有账号？ <a href="#small-dialog"
											class="play-icon popup-with-zoom-anim">登录</a>
									</p>
								</div>
							</div>
							<div class="signup">
								<form>
								<input type="text" id="verifyId" name="verifyId" value=""/>
									<input
										type="text" class="email" placeholder="请输入验证码"
										maxlength="10" pattern="[1-9]{1}\d{9}"
										title="Enter a valid mobile number" id="verifyId2" name="verifyId2"/>
									<!-- <input type="text" class="email" placeholder="Password" maxlength="10" pattern="[1-9]{1}\d{9}" /> -->
								</form>
								<div class="continue-button">
									<a href="#small-dialog3"
										class="hvr-shutter-out-horizontal play-icon popup-with-zoom-anim" id="verifyCheck" onclick="verifyCheck()">下一步</a>	
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
						<div id="small-dialog3" class="mfp-hide">
							<h3>注册账号</h3>
							<div class="social-sits">
								<div class="facebook-button">
									<a href="#">Connect with Facebook</a>
								</div>
								<div class="chrome-button">
									<a href="#">Connect with Google</a>
								</div>
								<div class="button-bottom">
									<p>
										已有账号？ <a href="#small-dialog"
											class="play-icon popup-with-zoom-anim">登录</a>
									</p>
								</div>
							</div>
							<div class="signup">
								<form action="<%=ctx%>/user/register">
									<!-- <input type="text" class="email" placeholder="Email"
										required="required"
										pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?"
										title="Enter a valid email" />  -->
										<input type="text" class="email" placeholder="Your realName"
										maxlength="10" required="required" name="realName" /> <input
										type="text" class="email" placeholder="Your userName"
										maxlength="10" required="required" name="userName" />
									<input type="password" placeholder="Password"
										required="required" pattern=".{6,}"
										title="密码须大于6位" autocomplete="off" name="password"/> 
										 <input type="submit"
										value="点击注册" />
								</form>
							</div>
							<div class="clearfix"></div>
						</div>
						<div id="small-dialog7" class="mfp-hide">
							<h3>注册账号</h3>
							<div class="social-sits">
								<div class="facebook-button">
									<a href="#">Connect with Facebook</a>
								</div>
								<div class="chrome-button">
									<a href="#">Connect with Google</a>
								</div>
								<div class="button-bottom">
									<p>
										已有账号？ <a href="#small-dialog"
											class="play-icon popup-with-zoom-anim">登录</a>
									</p>
								</div>
							</div>
							<div class="signup">
								<form action="upload.jsp">
									<input type="text" class="email" placeholder="Email"
										required="required"
										pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?"
										title="Enter a valid email" /> <input type="password"
										placeholder="Password" required="required" pattern=".{6,}"
										title="Minimum 6 characters required" /> <input type="submit"
										value="Sign In" />
								</form>
							</div>
							<div class="clearfix"></div>
						</div>
						<script>
							$(document).ready(function() {
								$('.popup-with-zoom-anim').magnificPopup({
									type : 'inline',
									fixedContentPos : false,
									fixedBgPos : true,
									overflowY : 'auto',
									closeBtnInside : true,
									preloader : false,
									midClick : true,
									removalDelay : 300,
									mainClass : 'my-mfp-zoom-in'
								});

							});
						</script>
					</div>
					<div class="signin">
						<a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a>
						<div id="small-dialog" class="mfp-hide">
							<h3>登录账户</h3>
							<div class="social-sits">
								<div class="facebook-button">
									<a href="#">这写个啥</a>
								</div>
								<div class="chrome-button">
									<a href="#">这写个啥</a>
								</div>
								<div class="button-bottom">
									<p>
										没有账号? <a href="#small-dialog2"
											class="play-icon popup-with-zoom-anim">注册</a>
									</p>
								</div>
							</div>
							<div class="signup">
								<form onsubmit="return false;">
									<input type="text" class="email" placeholder="Enter Username"
										required="required"
										 name="userName" id="userName"/> <input
										type="password" placeholder="Password" required="required"
										pattern=".{6,}" title="Minimum 6 characters required"
										name="password" id="password" /> <input type="submit"
										value="登录" onclick="login()" />
								</form>
								<div class="forgot">
									<a href="#">忘记密码 ?</a>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
						</c:if>
					<!-- pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?" -->
					</div>
				
			</div>
						
					<div class="clearfix"></div>
			</div>
			
		</div>
		<div class="clearfix"></div>
		
	</div>
	</nav>
	
	
	<div class="copyrights">
		Collect from <a href="http://www.cssmoban.com/"></a>
	</div>
	<div class="col-sm-3 col-md-2 sidebar">
		<div class="top-navigation">
			<div class="t-menu">MENU</div>
			<div class="t-img">
				<img src="images/为你推荐.jpg" alt="" />
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="drop-navigation drop-navigation">
			<ul class="nav nav-sidebar">
				<li class="active"><a href="<%=ctx%>/user/toIndexView" class="home-icon"><span
						class="glyphicon glyphicon-home" aria-hidden="true"></span>Home</a></li>
				<li><a href="<%=ctx%>/songList/selectSongListByType" class="user-icon"><span
						class="glyphicon glyphicon-home glyphicon-blackboard"
						aria-hidden="true"></span>歌单</a></li>
				<li><a href="history.jsp" class="sub-icon"><span
						class="glyphicon glyphicon-home glyphicon-hourglass"
						aria-hidden="true"></span>音乐人</a></li>
				<li><a href="javascript:void(0);" class="menu1"><span
						class="glyphicon glyphicon-film" aria-hidden="true"></span>排行榜<span
						class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
				<ul class="cl-effect-2">
					<li><a href="<%=ctx%>/song/selectSongByCounts">热歌榜</a></li>
					<li><a href="<%=ctx%>/song/selectSongByComment">热评榜</a></li>
					<li><a href="<%=ctx%>/song/selectSongByCreate">新歌榜</a></li>
				</ul>
				<!-- script-for-menu -->
				<script>
					$("li a.menu1").click(function() {
						$("ul.cl-effect-2").slideToggle(300, function() {
							// Animation complete.
						});
					});
				</script>
				<li><a href="javascript:void(0);" class="menu"><span class="glyphicon glyphicon-film glyphicon-king" aria-hidden="true"></span>分类听歌<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
						<ul class="cl-effect-1">
							<li><a href="<%=ctx%>/song/selectSongByType?type=1">说唱</a></li>                                             
							<li><a href="<%=ctx%>/song/selectSongByType?type=2">摇滚</a></li>
							<li><a href="<%=ctx%>/song/selectSongByType?type=3">流行</a></li> 
							<li><a href="<%=ctx%>/song/selectSongByType?type=4">民谣</a></li>  
						</ul>
				<!-- script-for-menu -->
				<script>
					$("li a.menu").click(function() {
						$("ul.cl-effect-1").slideToggle(300, function() {
							// Animation complete.
						});
					});
				</script>
			</ul>
			<!-- script-for-menu -->
			<script>
				$(".top-navigation").click(function() {
					$(".drop-navigation").slideToggle(300, function() {
						// Animation complete.
					});
				});
			</script>
		</div>
	</div>
	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
		<div class="main-grids">
			<div class="top-grids">
				<div class="recommended-info">
					<h3>热门推荐</h3>
				</div>
				<div class="col-md-2 resent-grid recommended-grid slider-top-grids">
					<div class="resent-grid-img recommended-grid-img">
						<a href="<%=ctx%>/song/selectSongByRandom"><img src="images/为你推荐.jpg" alt="" /></a>
						<div class="time">
							<p>歌曲数 :10</p>
						</div>
						<div class="clck">
							<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
						</div>
					</div>
					<div class="resent-grid-info recommended-grid-info">
						<h3>
							<a href="<%=ctx%>/song/selectSongByRandom" class="title title-info">每日推荐</a>
						</h3>
						<ul>
							<li><p class="author author-info">
									<a href="#" class="author">杨盛哲</a>
								</p></li>
							<li class="right-list"><p class="views views-info">知你口味</p></li>
						</ul>
					</div>
				</div>
				<c:forEach items="${songListVos}" var="songListVos">
				<div class="col-md-2 resent-grid recommended-grid slider-top-grids">
					<div class="resent-grid-img recommended-grid-img">
						<a href="<%=ctx%>/song/selectSongByList?listId=${songListVos.listId}&&userId=${songListVos.userId}"><img src="${songListVos.imgpath}" alt="" /></a>
						<div class="time">
							<p>歌曲数 :${songListVos.songCounts}</p>
						</div>
						<div class="clck">
							<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
						</div>
					</div>
					<div class="resent-grid-info recommended-grid-info">
						<h3>
							<a href="<%=ctx%>/song/selectSongByList?listId=${songListVos.listId}&&userId=${songListVos.userId}" class="title title-info">${songListVos.listName}</a>
						</h3>
						<ul>
							<li><p class="author author-info">
									<a href="#" class="author">${songListVos.realName}</a>
								</p></li>
							<li class="right-list"><p class="views views-info">${songListVos.clickCounts} views</p></li>
						</ul>
					</div>
				</div>
				</c:forEach>
				<div class="clearfix"></div>
			</div>
			<div class="recommended">
				<div class="recommended-grids">
					<div class="recommended-info">
						<h3>歌曲MV</h3>
					</div>
					<script src="js/responsiveslides.min.js"></script>
					<script>
						// You can also use "$(window).load(function() {"
						$(function() {
							// Slideshow 4
							$("#slider3")
									.responsiveSlides(
											{
												auto : true,
												pager : false,
												nav : true,
												speed : 500,
												namespace : "callbacks",
												before : function() {
													$('.events')
															.append(
																	"<li>before event fired.</li>");
												},
												after : function() {
													$('.events')
															.append(
																	"<li>after event fired.</li>");
												}
											});

						});
					</script>
					<div id="top" class="callbacks_container">
						<ul class="rslides" id="slider3">
							<li>
								<div class="animated-grids">
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="curriculumVideo.jsp"><img src="images/mv1.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>时长</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="curriculumVideo.jsp" class="title">佳鑫演出</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">杨盛哲</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">点击量 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.jsp"><img src="images/c1.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>6:23</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.jsp" class="title">冰雪女王</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">徐莉飒</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">14,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.jsp"><img src="images/c2.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>2:45</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.jsp" class="title">冰雪女王</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.jsp"><img src="images/c3.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>4:34</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.jsp" class="title">Nullam interdum metus
													viverra nullam varius sit sed viverra</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
							</li>
							<li>
								<div class="animated-grids">
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.jsp"><img src="images/c1.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>4:42</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.jsp" class="title">Varius sit sed
													viverra viverra nullam nullam interdum metus</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.jsp"><img src="images/c2.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>6:14</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.jsp" class="title">Nullam interdum metus
													viverra nullam varius sit sed viverra</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.jsp"><img src="images/c3.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>2:34</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.jsp" class="title">varius sit sed
													viverra viverra nullam Nullam interdum metus</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.html"><img src="images/c.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>5:12</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.html" class="title">Nullam interdum
													metus viverra nullam varius sit sed viverra</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">1,14,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
							</li>
							<li>
								<div class="animated-grids">
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.html"><img src="images/c2.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>4:42</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.html" class="title">Varius sit sed
													viverra viverra nullam nullam interdum metus</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.html"><img src="images/c3.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>6:14</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.html" class="title">Nullam interdum
													metus viverra nullam varius sit sed viverra</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.html"><img src="images/c.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>2:34</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.html" class="title">varius sit sed
													viverra viverra nullam Nullam interdum metus</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.html"><img src="images/c3.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>5:12</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.html" class="title">Nullam interdum
													metus viverra nullam varius sit sed viverra</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">1,14,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
							</li>
							<li>
								<div class="animated-grids">
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.html"><img src="images/mv1.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>4:42</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.html" class="title">Varius sit sed
													viverra viverra nullam nullam interdum metus</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.html"><img src="images/c.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>6:14</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.html" class="title">Nullam interdum
													metus viverra nullam varius sit sed viverra</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.html"><img src="images/c1.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>2:34</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.html" class="title">varius sit sed
													viverra viverra nullam Nullam interdum metus</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">2,114,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="col-md-3 resent-grid recommended-grid slider-first">
										<div class="resent-grid-img recommended-grid-img">
											<a href="single.html"><img src="images/c2.jpg" alt="" /></a>
											<div class="time small-time slider-time">
												<p>5:12</p>
											</div>
											<div class="clck small-clck">
												<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
											</div>
										</div>
										<div class="resent-grid-info recommended-grid-info">
											<h5>
												<a href="single.html" class="title">Nullam interdum
													metus viverra nullam varius sit sed viverra</a>
											</h5>
											<div class="slid-bottom-grids">
												<div class="slid-bottom-grid">
													<p class="author author-info">
														<a href="#" class="author">John Maniya</a>
													</p>
												</div>
												<div class="slid-bottom-grid slid-bottom-right">
													<p class="views views-info">1,14,200 views</p>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="recommended">
				<div class="recommended-grids">
					<div class="recommended-info">

						<div class="clearfix"></div>
					</div>
				</div>
			</div>

		</div>
		<div class="clearfix"></div>
		<div class="drop-menu">
			<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
				<li role="presentation"><a role="menuitem" tabindex="-1"
					href="#">Regular link</a></li>
				<li role="presentation" class="disabled"><a role="menuitem"
					tabindex="-1" href="#">Disabled link</a></li>
				<li role="presentation"><a role="menuitem" tabindex="-1"
					href="#">Another link</a></li>
			</ul>
		</div>
		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="js/bootstrap.min.js"></script>
		<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
</body>
<script type="text/javascript">


	function login() {
		var userName = $("#userName").val();
		var password = $("#password").val();
		$.ajax({
					url : "${pageContext.request.contextPath}/user/login",
					data : {
						userName : userName,
						password : password
					},
					dataType : "json",
					success : function(data) {
						if (data.msg == 1) {
							window.location.href = "${pageContext.request.contextPath}/user/toIndexView"
						} else if(data.msg == 2){
							window.location.href = "${pageContext.request.contextPath}/manager/toMindex"  
						}else{alert(data.msg)}
					}
				})
	
						}
	function verify(){
		$.ajax({
					url : "${pageContext.request.contextPath}/user/verify",
					data : {
					},
					dataType : "json",
					success : function(data) {
						$("#verifyId").val(data.msg);
					}
				})
	}
	 function stopDefault(e) {
	        if (e && e.preventDefault)
	            e.preventDefault();
	        else
	            window.event.returnValue = false; //兼容IE
	    }
	function verifyCheck(e){
		var verifyId = $("#verifyId").val();
		var verifyId2 = $("#verifyId2").val();
		if(verifyId==verifyId2){
			$("#verifyCheck").attr('href','#small-dialog3');
		}else{
			alert("验证码不正确")
			$("#verifyCheck").attr('href','#small-dialog2');
		}
	}
	
</script>
</html>